// 首页内容模块

/* 右侧小圈圈 */
.totop{
    display: none;
    .mixin1(#fff,160px,@color3);
}
.kefu{
    .mixin1(@color1,100px,#fff);
}

// 轮播图
.banner{
    position: relative;
    .imgs{
        width: 100%;
        height: 480px;
        overflow: hidden;
        div{
            width: 100%;
            height: 480px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            background-position: center center;
            background-size: cover;
            opacity: 0.1;
        }
        div:nth-child(1){
            background-image: url(../imgs/banner1.jpg);
            background-position: center center;
            background-size: cover;
        }
        div:nth-child(2){
            background-image: url(../imgs/banner2.jpg);
            background-position: center center;
            background-size: cover;
        }
        div:nth-child(3){
            background-image: url(../imgs/banner3.jpg);
            background-position: center center;
            background-size: cover;
        }
    }
    .prev{
        width: 25px;
        height: 24px;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -12px;
        z-index: 100;
        background-image: url(../imgs/fx1.png);
        cursor: pointer;
    }
    .next{
        width: 25px;
        height: 24px;
        position: absolute;
        right: 5px;
        top: 50%;
        margin-top: -12px;
        z-index: 100;
        background-image: url(../imgs/fx2.png);
        cursor: pointer;
    }
    .pages{
        width: 300px;
        height: 20px;
        // background-color: pink;
        position: absolute;
        left: 50%;
        bottom: 20px;
        z-index: 100;
        margin-left: -150px;
        text-align: center;
        li{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            line-height: 20px;
            text-align: center;
            background-color: #eee;
            margin: 0 3px;
            cursor: pointer;
        }
        .show{
            color: azure;
            background-color: lightgreen;
        }
    }
}

// 商品展示
.goods{
    width: 100%;
    background-color: #eee;
    padding-bottom: 20px;
    // 新商品展示
    .new_goods{
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
        padding: 50px 0 20px 0;
        .box{
            float: left;
            width: 390px;
            background-color: #fff;
            position: relative;
            margin-right: 15px;
            .goods_img1{
                width: 390px;
            }
            .goods_img2{
                width: 264px;
                height: 176px;
                position: absolute;
                top: 72px;
                left: 63px;
                z-index: 10;
            }
            .goods_img3{
                width: 390px;
                height: 264px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 20;
                background-color: #fff;
                display: none;
            }
            &:hover .goods_img3{
                display: block;
            }
            &:hover{
                box-shadow: 0 5px 10px #ccc;
            }
            h1{
                margin-top: 130px;
                font-size: 28px;
                text-align: center;
                color: @color1;
            }
            h5{
                font-size: 12px;
                color: @color1;
                text-align: center;
                margin: 15px 0;
            }
            p{
                font-size: 14px;
                color: @color1;
                text-align: center;
                padding: 0 20px;
                line-height: 150%;
            }
            div{
                font-size: 14px;
                color: @color1;
                text-align: center;
                padding: 30px 0;
            }
        }
        .no_mgr{
            margin-right: 0;
        }
    }

    // 服务保障
    .service{
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
        a{
            float: left;
            width: 592px;
            height: 400px;
            position: relative;
        }
        .service-1{
            background: url(https://stormsend1.djicdn.com/stormsend/uploads/8193accf66654676425ca7c303d37c77.jpg) 0 0 no-repeat;
            background-size: 100%;
            margin-right: 16px;
        }
        .service-2{
            background: url(https://stormsend1.djicdn.com/stormsend/uploads/90badd9b7a75e194a2edc2e007507831.jpg) 0 0 no-repeat;
            background-size: 100%;
        }
        p{
            width: 100%;
            font-size: 24px;
            position: absolute;
            left: 0;
            top: 50px;
            text-align: center;
            color: @color1;
        }
    }

    // 御 Mavic
    .mavic{
        width: 1200px;
        margin: 80px auto 0;
        &-head{
            line-height: 64px;
            overflow: hidden;
            h1{
                font-size: 32px;
                color: @color1;
                font-weight: bold;
                float: left;
            }
            a{
                float: right;
                font-size: 17px;
                color: @color1;
            }
            a:hover{
                color: #1890FF;
            }
        }
        .mixin2();
        .mavic-list{
            margin-top: 20px;
            overflow: hidden;
            .list-wrap{
                width: 1300px;
                overflow: hidden;
                .item{
                    width: 288px;
                    height: 420px;
                    float: left;
                    margin-right: 16px;
                    margin-bottom: 16px;
                    background-color: #fff;
                    padding: 24px 16px;
                    position: relative;
                    img{
                        width: 256px;
                        height: 256px;
                    }
                    h3{
                        font-size: 18px;
                        color: @color1;
                        margin: 40px 0 20px 0;
                        text-align: center;
                    }
                    p{
                        font-size: 16px;
                        color: @color1;
                        text-align: center;
                    }
                    .hover{
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 288px;
                        height: 288px;
                        display: none;
                        img{
                            width: 288px;
                            height: 288px;
                        }
                        p{
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            width: 100%;
                            padding: 10px 20px;
                            text-align: center;
                            color: #fff;
                            font-size: 14px;
                            background-color: rgba(0,0,0,0.4);
                        }
                    }
                }
                .item:hover .hover{
                    display: block;
                }
                .item:hover{
                    box-shadow: 0 5px 10px #ccc;
                }
            } 
        }
    }
}
